20201214 新增
- 推荐使用官推的
vue-echarts，“亲儿子” 哈哈 待遇确实是好
资料
开始爬坑
1. echarts上的所有 配置方法，其实都可以在 v-charts 组件的 extend 属性中进行设置
echarts配置官网
v-charts官网提供的extend属性的使用 demo
`extend` 使用示例
2. 关于 extend 中设置 series 时无法像 echarts 那样值设置成数组的问题
因为项目有需求如下图所示：
需求效果图
这个参照echarts的配置是需要将series设置成数组，分别设置相应的渐变颜色，但是v-charts不能写成数组形式的，参照v-charts作者在 github 上的回复，分析出最好的方式是采用其所说的第三种，最后实现了效果图上的需求，下面是主要的设置代码：
"series.0.barMaxWidth": 10,
"series.1.barMaxWidth": 10,
"series.0.label": {
show: true,
position: "top",
color: "#91fcf2",
fontSize: "10px",
formatter: "{c}"
},
"series.1.label": {
show: true,
position: "top",
color: "#91fcf2",
fontSize: "10px",
formatter: "{c}"
},
"series.0.itemStyle.color": {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#4491f7" // 0% 处的颜色
},
{
offset: 1,
color: "#77f2fc" // 100% 处的颜色
}
],
global: false // 缺省为 false
},
"series.1.itemStyle.color": {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "yellow" // 0% 处的颜色
},
{
offset: 1,
color: "green" // 100% 处的颜色
}
],
global: false // 缺省为 false
},
3. 由于做的项目无法访问外网的机制，导致 map 组件中，远程请求的对应地图 .json 文件，无法获取到展现便是空白了
- 先说下
v-charts -> map组件默认的机制
在
chartSetting.position设置了地址之后，组件会直接请求相应的 cdnhttps://unpkg.com/echarts@3.6.2/map/json/下的.json文件；因为是外网环境，所以说需要修改一下这个机制
- 如何修改
- 结合上面找到的解决方法，下面贴一下我的使用方式的主要代码部分
// 修复 v-charts 插件使用的地图控件的路径问题：默认是用的 https://unpkg.com/echarts@3.6.2/map/json/ ，修改后使用 echarts/map/json； demo 地址：https://github.com/ElemeFE/v-charts/blob/70af7460e9aae9448bc98127814297cd098c2e65/examples/pages/test.vue
if (isChina) {
import("echarts/map/json/china.json").then(main => {
// 修改地图引用的 json 文件
me.mapChart.chartSetting.mapOrigin = main;
});
} else {
import(`echarts/map/json/province/${
data.data.role_pinyin
}.json`).then(main => {
// 修改地图引用的 json 文件
me.mapChart.chartSetting.mapOrigin = main;
});
}
