Comments (9)
Can you paste it here?
from vue-echarts.
import { use } from 'echarts/core'
import { DatasetComponent } from 'echarts/components'
use([DatasetComponent])
from vue-echarts.
Can you please add this to the documentation page :) I spent a long time trying to debug this.
from vue-echarts.
@BenJackGill We've released an import code generator to help with this. You can try out here: https://vue-echarts.dev/#codegen
from vue-echarts.
I don't know what this tool is supposed to do?
I tried putting in my options code (the options object I use for chart) and it keeps saying:
/* Unable to parse `option` code */
// Unexpected token ':'
from vue-echarts.
I have this reactive object I am using for the options:
const lineChartOptions = reactive<ECOption>({
grid: {
left: 40,
top: 30,
right: 20,
bottom: 30,
},
xAxis: {
type: "time",
boundaryGap: ["1%", "1%"],
offset: 1,
axisPointer: {
show: true,
snap: true,
},
axisLabel: {
formatter: "{d} {MMM} {yy}",
},
},
yAxis: {
type: "value",
inverse: true,
axisLabel: {
formatter: (value: number): string => {
return value === 100 ? "100+" : value.toString();
},
},
min: 1,
max: 100,
},
dataset: {
dimensions: ["x", "y"],
source: seriesData, // Because we are inside reactive object, we don't need to use .value
},
series: [
{
type: "line",
smooth: true,
lineStyle: {
width: 5,
},
},
],
tooltip: {
show: true,
},
visualMap: {
show: false,
type: "continuous",
min: 1,
max: 100,
inRange: {
color: [greenMediumHex, orangeMediumHex, redMediumHex],
},
},
});
And this is just the object part I was pasting:
{
grid: {
left: 40,
top: 30,
right: 20,
bottom: 30,
},
xAxis: {
type: "time",
boundaryGap: ["1%", "1%"],
offset: 1,
axisPointer: {
show: true,
snap: true,
},
axisLabel: {
formatter: "{d} {MMM} {yy}",
},
},
yAxis: {
type: "value",
inverse: true,
axisLabel: {
formatter: (value: number): string => {
return value === 100 ? "100+" : value.toString();
},
},
min: 1,
max: 100,
},
dataset: {
dimensions: ["x", "y"],
source: seriesData, // Because we are inside reactive object, we don't need to use .value
},
series: [
{
type: "line",
smooth: true,
lineStyle: {
width: 5,
},
},
],
tooltip: {
show: true,
},
visualMap: {
show: false,
type: "continuous",
min: 1,
max: 100,
inRange: {
color: [greenMediumHex, orangeMediumHex, redMediumHex],
},
},
}
from vue-echarts.
I'm sorry you need to paste in JavaScript literals (which cannot contain type annotations and variables like greenMediumHex
).
@@ -21,7 +21,7 @@
type: "value",
inverse: true,
axisLabel: {
- formatter: (value: number): string => {
+ formatter: (value) => {
return value === 100 ? "100+" : value.toString();
},
},
@@ -30,7 +30,7 @@
},
dataset: {
dimensions: ["x", "y"],
- source: seriesData, // Because we are inside reactive object, we don't need to use .value
+ source: [], // Because we are inside reactive object, we don't need to use .value
},
series: [
{
@@ -50,7 +50,7 @@
min: 1,
max: 100,
inRange: {
- color: [greenMediumHex, orangeMediumHex, redMediumHex],
+ color: [],
},
},
}
from vue-echarts.
Update: codegen now supports TypeScript, but still you need to remove undeclared variables for it to correctly evaluate the option value.
from vue-echarts.
此处 可能会遇上一个小问题。 从后端接口获取的json格式数据 对象。直接设置到source上,会报错。
例如:
let res = await Axios.post('url',data).then(res=>res.json); option.dataset.source.push(...res.data.list)
会出错 reactivity.esm-bundler.js:418 Uncaught (in promise) TypeError: obj.hasOwnProperty is not a function
可以打印api.data.list 项。对比初始时设置的source项。
api.data.list 中的对象是 没有hasOwnProperty 的 但在JS中创建的对象 new obj = {a:1} 是存在hasOwnProperty 的
apiRes.data.list.forEach(item => {
option.value.dataset.source.push(Object.assign({}, item))
})
from vue-echarts.
Related Issues (20)
- Remove vue demi HOT 1
- From version 6.6.1 setting min-height make the chart disappear (height=0px) HOT 1
- Default ESM package HOT 2
- chart not appear when using option dataset with source HOT 1
- Native listener on VueEcharts Component does not work in Vue 3 HOT 4
- Types broken with ECharts 5.5 + Vue 3 + `moduleResolution: bundler` HOT 1
- useAutoresize throttle switch to requestAnimationFrame method HOT 3
- Nuxt 3 Module HOT 1
- Renderer 'undefined' is not imported. Please import it first. HOT 8
- autoresize prop doesn't work as expected from 6.6.1 HOT 1
- 官网的import code generator似乎不能正常工作了 HOT 1
- h5手机端支持吗?手机端的点击事件能触发吗? HOT 1
- Unable to compile after the introduction of vitepress, error: ERR-REQUIRE-ESM
- 路由缓存时,切换Tab页面,ECHARTS不显示 HOT 3
- 安装报错 Invalid response body while trying to fetch https://registry.npmjs.org/resize-detector: Cannot read properties of null (reading 'pickAlgorithm') HOT 2
- `npm i echarts vue-echarts` not installing for vue3 project HOT 1
- build后无法获取echart的实例 HOT 13
- 使用dataset数据集多纬度时报错 HOT 3
- vue-echart instance doesn't have off function HOT 5
- 示例代码显示内容空白 HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-echarts.