vue每个页面new一个实例中运用echarts图表-polar极坐标双数值轴

原创

于 2018-05-16 22:59:26 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#echarts polar #vue多页面echarts

本文介绍在Vue多页面应用中如何为每个页面创建独立的ECharts实例，详细讲解了下载ECharts、配置HTML和JavaScript的方法，并探讨了ECharts polar极坐标系中双数值轴的设置技巧，包括颜色匹配和美观性提升。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

老规矩，先上图再说话
这里写图片描述
网上关于怎么在vue中使用echarts已经很多了，但是都是单页面的使用方法，在这里说一个最土的写法中怎么使用echarts，也简单的说一下echaarts中的polar极坐标双数值轴图表。
所有代码在最后，不想看过程的直接拉到最后……

下载 echarts的方法

npm i echarts  
然后去node_models里面去找

html

<div id="myChart" :style="{width: '300px', height: '300px',margin:'0 auto'}"></div>

script

let myChart = echarts.init(document.getElementById('myChart'))//引入的echarts会抛出一个echarts对象
myChart.setOption(option)

再说一下 echarts的polar极坐标双数值轴

第一点

　　clockwise: clockwise, //是否逆时针
　　startAngle: 90,//x轴旋转角度
　　interval: 5,//外层圆最小刻度 单位

第二点 color 与线的颜色一致，更美观

 data: {
   color: ['#4fa8f9','#6ec71e'],
 },
let option = {     
        color: this.color,
        series: [
                    {
                        coordinateSystem: 'polar',
                        symbol: "none",
                        itemStyle:{
                          normal:{
                            lineStyle