最近项目有个月报分析, 里边用到了柱状图, 堆叠图, 环形图, 饼图, 折线图这几种基本图表.
自己封装的 chart 组件:
- <!-- 图表组件 -->
- <template>
- <div :id="echartId" :class="className">
- </div>
- </template>
- <script>
- import * as echarts from 'echarts/dist/echarts.min';
- export default {
- name: 'Chart',
- props: {
- echartId: {
- type: String,
- default: ''
- },
- className: {
- type: String,
- default: ''
- },
- option: {
- type: Object,
- default() {
- return {};
- }
- }
- },
- watch: {
- option: {
- handler(val) {
- this.initEcharts();
- },
- deep: true
- }
- },
- mounted() {
- this.initEcharts();
- },
- methods: {
- initEcharts() {
- const chartObj = echarts.init(document.getElementById(this.echartId));
- // 响应式
- Windows.onresize = function () {
- chartObj.resize();
- };
- chartObj.setOption(this.option);
- // 环形图点击内环, 外环数据联动
- if (this.echartId === 'cost-spread') {
- chartObj.off('click');
- chartObj.on('click', (params) => {
- this.$emit('updateIndex', params);
- this.initEcharts();
- });
- }
- }
- }
- };
- </script>
问题
1) 图表第一次渲染是没问题的. 当切换筛选条件第二次渲染的时候, 会把第一次的数据合并.
解决办法: 应该设置 mychart.setoption({},true);
原因: chart.setOption(option,notMerge,lazyUpdate);
option: 图表的配置项和数据
notMerge: 可选, 是否不跟之前设置的 option 进行合并, 默认为 false, 即合并.(这里是导致二次渲染不成功的根本)
lazyUpdate: 可选, 在设置完 option 后是否不立即更新图表, 默认为 false, 即立即更新.
2) 一个 cavans 里有多个图表, 比如环形图和柱状堆叠图.
tooltip 对于柱状堆叠图和环形图的用法不一样. 所以要在柱状堆叠图的 grid 里再设置一遍.
并且实现堆叠图 hover 当前鼠标所在位置数值.
- tooltip: {
- trigger: 'item' (饼图)/'axis'(grid 坐标轴),
- axisPointer: {
- type: "cross",
- label: {
- show: false,
- formatter: function (params) {
- if (params.seriesData.length === 0) {
- // 鼠标对应的 y 轴数据
- Windows.mouseCurValue = params.value;
- }
- }
- }
- },
- formatter: function (params) {
- // 堆叠图
- if (Array.isArray(params)) {
- let res = "", sum = 0, sub = 0, arr = [], brr = [];
- params.forEach(i => {
- if (i.data> 0) {
- arr.push(i);
- } else {
- brr.push(i);
- }
- });
- if(Windows.mouseCurValue> 0) {
- for (let i = 0; i <arr.length; i++) {
- let series = arr[i];
- series.seriesName = series.seriesName.indexOf('other')> -1 ? 'others' : series.seriesName;
- sum += Number(series.data);
- if (sum>= Windows.mouseCurValue) {
- res = series.axisValue + "<br/>" + series.marker + series.seriesName + ":" + format.commafy(series.data) + "<br/>";
- break;
- }
- }
- } else {
- for (let i = 0; i <brr.length; i++) {
- let series = brr[i];
- series.seriesName = series.seriesName.indexOf('other')> -1 ? 'others' : series.seriesName;
- sub += Number(series.data);
- if (sub <= Windows.mouseCurValue) {
- res = series.axisValue + "<br/>" + series.marker + series.seriesName + ":" + format.commafy(series.data) + "<br/>";
- break;
- }
- }
- }
- return res;
- } else {
- let name = params.name.indexOf('other')> -1 ? 'others' : params.name;
- return name + ":" + utils.millionMoney(params.value);
- }
- }
- }
3)label 字体样式是否折行, 折行样式
- label: {
- normal: {
- formatter: function (p) {
- let str = '{a|' + p.data.costName + '}{abg|}\n{hr|}\n{c|'+ p.name + ':' + p.value + '}{per|' + p.percent + '%}';
- return str;
- },
- rich: {
- a: {
- fontSize: 10,
- lineHeight: 17,
- color: '#999',
- align: 'center'
- },
- hr: {
- width: '100%',
- height: 0
- },
- c: {
- fontSize: 10,
- lineHeight: 17,
- color: '#333',
- align: 'left'
- },
- per: {
- fontSize: 10,
- borderRadius: 2,
- color: 'white',
- align: 'left',
- padding: [1, 4, 2, 4],
- backgroundColor: '#727272',
- borderRadius: 2
- }
- }
- }
- },
来源: http://www.jianshu.com/p/fc8f6243d1e3