因为项目需要,又要写echarts图,除了写图形以外,它本身自带颜色是非常难看,所以也需要把颜色改一下。我做了三种图:折线、柱状、饼图。添加颜色的方法分别是:
折线
在option 里
//创建折线图 function createCharts(chart) { // 基于准备好的dom,初始化echarts实例 myChartLine = echarts.init(document.getElementById('Line_charts')); var series = []; for (var i = 0; i < chart.Series.length; i++) { //strat var ser = { name: chart.Series[i].Name, type: 'line', //stack: '总量', data: chart.Series[i].Values } series.push(ser) } // 指定图表的配置项和数据 option = {
//标题 title: { text: '进销项票关键数据变化趋势', x: 'center', }, tooltip: { trigger: 'axis' }, legend: { data: chart.Categories, x: 'right', }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'category', boundaryGap: false, data: chart.XAxisValues } ], yAxis: [ { type: 'value' } ], color: ['#ff5471', '#18476e', '#55a8fd'], series: series }; // 使用刚指定的配置项和数据显示图表。 myChartLine.setOption(option); }
如果单条线在option里
series: [ { name:'Step Start', type:'line', step: 'start', itemStyle: { normal: { color: '#55a8fd', lineStyle: { color: '#55a8fd' } } }, data:[120, 132, 101, 134, 90, 230, 210] },
柱形
特别注意的一点是,如果用同上方法,柱子的颜色都是一样,所以需要另外方法设置:
//创建柱状图 function createBar(chart) { myChartBar = echarts.init(document.getElementById('bar_charts')); var series = []; for (var i = 0; i < chart.Series.length; i++) { series.push({ name: chart.Series[i].Name, type: 'bar', //stack: '总量', data: chart.Series[i].Values, itemStyle: { normal: { color: function (params) { var colorList = [ '#ff5471', '#18476e', '#55a8fd', '#fccd39', '#f89a36' ]; return colorList[params.dataIndex] }, } },
//设置柱子的宽度 barWidth: 50, }) }
饼形
//创建饼形图 function createPie(chart) { var datale = []; //for (var i = 0; i < chart.length; i++) { // datale.push(chart[i].name); //} $.each(chart, function (i, ele) { datale.push(ele.name); }) myChartPie = echarts.init(document.getElementById('pie_charts')); option = { title: { text: '近一个月收票单位排行(Top5)', x: 'center', }, tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" }, legend: { orient: 'vertical', x: 'right', data: datale }, series: [ { name: '访问来源', type: 'pie', radius: ['40%', '70%'], avoidLabelOverlap: false, label: { normal: { show: true, } }, data: chart } ], color: ['#ff5471', '#18476e', '#55a8fd', '#fccd39', '#f89a36'] }; myChartPie.setOption(option); }